<template>
    <div class="insert-music-box">
        <div class="insert-music-form flex-center-col">
            <el-form :model="obj.musicForm"
                     :rules="rules"
                     label-position="left"
                     ref="musicForm"
                     label-width="100px"
                     class="music-form">
                <el-form-item label="音乐名称" prop="musicName" required>
                    <el-input v-model="obj.musicForm.musicName" @keyup="computedMusicFormat" ></el-input>
                </el-form-item>

                <el-form-item label="歌手名称" prop="singerName" required>
                    <el-input v-model="obj.musicForm.singerName"></el-input>
                </el-form-item>

                <el-form-item label="音乐地址" prop="musicUrl" required>
                    <el-input v-model="obj.musicForm.musicUrl"></el-input>
                    <el-link href="/bc/updateFile" >上传文件</el-link>
                </el-form-item>

                <el-form-item label="音乐格式" prop="musicFormat">
                    <el-input v-model="obj.musicForm.musicFormat"></el-input>
                </el-form-item>

                <el-form-item label="音乐封面地址" prop="musicImage">
                    <el-input v-model="obj.musicForm.musicImage"></el-input>
                    <div style=" width: 300px;text-align:left;position: relative;left: 0;top: 50px">图片预览:</div>
                    <YImage :src="obj.musicForm.musicImage"
                        style="width: 200px;height:200px;max-height:300px;margin:50px 0 20px 0"
                        fit="contain"
                    >

                    </YImage>
                </el-form-item>


                <el-form-item label="分类">
                    <el-radio-group v-model="obj.musicForm.classify" size="medium">
                        <el-radio border :label="item.id"  v-for="item in obj.musicClassifyList">
                            {{item.name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="歌词" prop="musicLyric">
                    <el-input type="textarea" v-model="obj.musicForm.musicLyric"></el-input>
                </el-form-item>

                <el-form-item label="显示" class="flex-center" >
                    <el-switch
                            style="display: block"
                            width="80"
                            v-model="obj.musicForm.publish"
                            active-color="#13ce66"
                            inactive-color="#868585"
                            active-text="显示"
                            inactive-text="隐藏"
                            :active-value="1"
                            :inactive-value="0"

                    >
                    </el-switch>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="submitForm">立即创建</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {computed, reactive, ref} from "@vue/reactivity";
    import service from "@/assets/js/service";
    import {errorMessage, successMessage} from "@/assets/js/utils";
    import YImage from "@/components/other/YImage";

    export default {
        name: "InsertMusic",
        components: {YImage},
        setup(){

            let musicForm=ref()
            let obj=reactive({
                musicForm:{
                    id:-1,
                    musicName:"",
                    singerName:"",
                    classify:1,
                    collect:0,
                    musicFormat:"",
                    musicImage:"",
                    musicUrl:"",
                    publish:1,
                    musicLyric:""

                },
                musicClassifyList:[
                    {
                        id:1,
                        name:"古典"
                    },
                    {
                        id:2,
                        name:"摇滚"
                    },
                    {
                        id:3,
                        name:"民谣"
                    }
                ]
            })

            let submitForm=()=>{
                let response=service.insertMusic(obj.musicForm)
                response.then(resp=>{
                    if(resp.code === 200){
                        successMessage(resp.msg)
                    }else{
                        errorMessage(resp.msg)
                    }
                })


            }

            let computedMusicFormat=(()=>{
                let musicName=obj.musicForm.musicName
                if(musicName){
                    let index=musicName.lastIndexOf(".")
                    if( index !== -1){
                        obj.musicForm.musicFormat=musicName.substring(index+1,musicName.length)
                    }else{
                        obj.musicForm.musicFormat="未知格式"
                    }
                }

            })
            return{
                obj,
                musicForm,
                submitForm,
                computedMusicFormat
            }
        }
    }
</script>

<style scoped lang="less">
    .insert-music-box{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;

        /*外面盒子*/
        .insert-music-form{
            width: 80%;
            height: 700px;


            /*表单*/
            .music-form{
                width: 50%;
                height: 80%;
            }
        }
    }

</style>